{% extends "base.html" %}
{% block head %}
    <head>
        <meta charset="UTF-8">
        <title>测试管理系统</title>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
        <link rel="stylesheet" href="../../../static/layui/css/layui.css">
        <script src="../../../static/layui/layui.js"></script>
        <script type="text/javascript" src="../../../static/js/tool_p.js"></script>
        <script type="text/javascript" src="../../../static/js/echarts.js"></script>
        <script type="text/javascript" src="../../../static/js/echarts.min.js"></script>
        <script type="text/javascript" src="../../../static/js/china.js"></script>
        <script src="../../../static/js/jquery-1.11.3.min.js"></script>
    </head>
{% endblock head %}
{% block left %}
    {{ super() }}
{% endblock left %}
{% block right %}
    {{ super() }}
    <!-- 修改name（页面名称） -->
    {% set name = '监控结果' %}
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>{{ name }}</legend>
    </fieldset>
    <!-- 页面私有部分 -->
    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
            <li class="layui-this">任务</li>
            <li>接口</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <!-- 第一个tab下内容 -->
                <div style="width: 1920px">
                    <div class="layui-form-item" style="display:inline-block;">
                        <label class="layui-form-label">时间范围</label>
                        <div class="layui-input-block">
                            <input autocomplete="off" type="search" name="time_frame" class="layui-input" id="task_time"
                                   placeholder=" 请选择时间范围 " style="width: 300px">
                        </div>
                    </div>

                    <div class="layui-form" lay-filter="exam" style="display:inline-block">
                        <label class="layui-form-label">任务id</label>
                        <div class="layui-input-block">
                            <select id="task" name="task" lay-verify="required" lay-search="">
                                <option value="0"></option>
                                {% for i in tasklist %}
                                    <option value={{ i[0] }}>{{ i[1] }}</option>
                                {% endfor %}
                            </select>
                        </div>

                    </div>


                    <div class="layui-form-item" style="display:inline-block;">

                        <button class="layui-btn disabled" onclick="task_statis(this)">查询</button>
                    </div>

                </div>
                <div style="display:inline-block;">
                    <div id="taskstatis" style="width: 600px;height:600px;float:left"></div>

                </div>

            </div>
            <!-- 第一个tab内容结束 -->

            <div class="layui-tab-item">
                <!-- 第二个tab下内容 -->
                <div style="width: 1920px">
                    <div class="layui-form-item" style="display:inline-block;">
                        <label class="layui-form-label">时间范围</label>
                        <div class="layui-input-block">
                            <input autocomplete="off" type="search" name="time_frame" class="layui-input" id="api_time"
                                   placeholder=" 请选择时间范围 " style="width: 300px">
                        </div>
                    </div>

                    {#                    <div class="layui-form-item" style="display:inline-block;">#}
                    {#        <label class="layui-form-label">接口id</label>#}
                    {#        <div class="layui-input-block">#}
                    {#            <input id="api_id" type="search" name="api_id" lay-verify="required" autocomplete="off"   placeholder=" 请输入接口id " class="layui-input" style="width: 150px" value="{{ api_id }}" >#}
                    {#        </div>#}
                    {#    </div>#}
                    <div class="layui-form" lay-filter="group" style="display:inline-block;width: 250px">
                        <label class="layui-form-label">业务线</label>
                        <div class="layui-input-block">
                            <select id="group" name="group" lay-verify="required" lay-search="" lay-filter="group">
                                <option value="0"></option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form" lay-filter="project" style="display:inline-block;width: 250px">
                        <label class="layui-form-label">项目</label>
                        <div class="layui-input-block">
                            <select id="project" name="project" lay-verify="required" lay-search=""
                                    lay-filter="project">
                                <option value="0"></option>
                            </select>
                        </div>
                    </div>


                    <div class="layui-form" lay-filter="cat" style="display:inline-block;width: 250px">
                        <label class="layui-form-label">模块</label>
                        <div class="layui-input-block">
                            <select id="cat" name="cat" lay-verify="required" lay-search="" lay-filter="cat">
                                <option value="0"></option>
                            </select>
                        </div>
                    </div>


                    <div class="layui-form" lay-filter="interface" style="display:inline-block;width: 250px">
                        <label class="layui-form-label">接口</label>
                        <div class="layui-input-block">
                            <select id="interface" name="interface" lay-verify="required" lay-search="">
                                <option value="0"></option>
                            </select>
                        </div>

                    </div>


                    <div class="layui-form-item" style="display:inline-block;padding: 20px">
                        <button class="layui-btn disabled" onclick="api_statis(this)">查询</button>
                    </div>

                </div>
                <div style="display:inline-block;">
                    <div id="apistatis" style="width: 1600px;height:600px;float:left"></div>

                </div>


            </div>


            <!-- 第二个tab内容结束 -->
        </div>

    </div>
    </div>

    <script>
        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;
            form.val('exam', {
                task: "1"
            });
            var laydate = layui.laydate;
            //日期时间选择器
            laydate.render({
                elem: '#task_time'
                , type: 'datetime'
                , range: true
                , value: "{{ mydate }}"
            });
            laydate.render({
                elem: '#api_time'
                , type: 'datetime'
                , range: true
                , value: "{{ mydate }}"
            });
            form.on('select(group)', function (data) {
                get_project(data.value)
            });
            form.on('select(project)', function (data) {
                get_cat(data.value)
            });
            form.on('select(cat)', function (data) {
                get_interface(data.value)
            });

        });
        var myChartaskstatis = echarts.init(document.getElementById('taskstatis'));
        var myCharapistatis = echarts.init(document.getElementById('apistatis'));

        var optiontaskstatis = {
            title: {
                text: '接口响应状态统计',
                {#subtext: '纯属虚构',#}
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            series: [
                {
                    name: '接口响应状态',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var optionapistatis = {
            title: {
                text: '接口响应时间(单位：ms)'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {data: [1, 2, 3, 4]},


            yAxis: {
                splitLine: {
                    show: false
                }
            },
            toolbox: {
                left: 'center',
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            dataZoom: [{
                startValue: '2014-06-01'
            }, {
                type: 'inside'
            }],
            visualMap: {
                top: 10,
                right: 10,
                pieces: [{
                    gt: 0,
                    lte: 1000,
                    color: '#096'
                }, {
                    gt: 1000,
                    lte: 2000,
                    color: '#ffde33'
                }, {
                    gt: 2000,
                    lte: 3000,
                    color: '#ff9933'
                }, {
                    gt: 3000,
                    lte: 5000,
                    color: '#cc0033'
                }, {
                    gt: 5000,
                    lte: 10000,
                    color: '#660099'
                }, {
                    gt: 10000,
                    color: '#7e0023'
                }],
                outOfRange: {
                    color: '#999'
                }
            },
            series: {
                name: '响应时间(单位：ms)',
                type: 'line',
                data: [2, 4, 6, 8],
                markLine: {
                    silent: true,
                    data: [{
                        yAxis: 1000
                    }, {
                        yAxis: 2000
                    }, {
                        yAxis: 3000
                    }, {
                        yAxis: 5000
                    }, {
                        yAxis: 10000
                    }]
                }
            }
        };
        //进入页面自动请求默认7天内数据
        window.onload = function () {
            //task_statis()
            get_group()
        };

        function task_statis(e) {
            var time_frame = document.getElementById("task_time").value;
            var task_id = document.getElementById("task").value;
            var xmlhttp;
            xmlhttp = new XMLHttpRequest();
            xmlhttp.open("POST", "result", true);
            var data = '{ "time_frame" : "' + time_frame + '", "task_id" : ' + task_id + '}';
            xmlhttp.send(data);
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var c = JSON.parse(xmlhttp.responseText)
                    if (c.code == 1000) {
                        //给图标赋值
                        if (c.taskstatis == "") {
                            alert("暂无数据")
                        } else {
                            optiontaskstatis.series[0].data = c.taskstatis;
                            myChartaskstatis.setOption(optiontaskstatis);
                        }
                    }
                }
            }
        }

        function api_statis(e) {
            var time_frame = document.getElementById("api_time").value;
            var interface = document.getElementById("interface").value;
            if (interface == "") {
                alert("请选择接口")
            } else {
                var xmlhttp;
                xmlhttp = new XMLHttpRequest();
                xmlhttp.open("POST", "apistatis", true);
                var data = '{ "time_frame" : "' + time_frame + '", "api_id" : ' + interface + '}';
                xmlhttp.send(data);
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        var c = JSON.parse(xmlhttp.responseText)
                        if (c.code == 1000) {
                            //给图标赋值
                            if (c.r == "") {
                                alert("暂无数据")
                            } else {
                                optionapistatis.xAxis.data = c.t;
                                optionapistatis.series.data = c.r;
                                optionapistatis.title.text = '接口平均响应时间：'+c.avg_r+'ms';
                                myCharapistatis.setOption(optionapistatis,true);
                            }
                        }
                    }
                }
            }
        }

        //获取业务线
        function get_group() {
            var xmlhttp;
            xmlhttp = new XMLHttpRequest();
            xmlhttp.open("POST", "get_interface_list", true);
            var params = 'type=group&id=0';
            xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xmlhttp.send(params);
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var c = JSON.parse(xmlhttp.responseText)
                    console.log(c)
                    if (c.code == 1000) {
                        //给图标赋值
                        if (c.data == "") {
                            alert("暂无数据")
                            layui.form.render('select', 'group');//需要渲染一下
                        } else {
                            resultData = c.data;
                            var htmls = '<option value="">请选择</option>'; //全局变量
                            for (var i in resultData) {
                                htmls += '<option value = "' + resultData[i].id + '">' + resultData[i].title + '</option>'
                            }
                            $("#group").html(htmls); //通过select id进行赋值
                            layui.form.render('select', 'group');//需要渲染一下
                        }
                    }
                    if (c.code == 1002) {
                        alert('该业务线下暂时无数据')
                    }
                }
            }
        }

        //获取项目
        function get_project(group_id) {
            var xmlhttp;
            xmlhttp = new XMLHttpRequest();
            xmlhttp.open("POST", "get_interface_list", true);
            var params = 'type=project&id=' + group_id;
            xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xmlhttp.send(params);
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var c = JSON.parse(xmlhttp.responseText)
                    console.log(c)
                    if (c.code == 1000) {
                        //给图标赋值
                        if (c.data == "") {
                            alert("暂无数据")
                            layui.form.render('select', 'project');//需要渲染一下
                        } else {
                            resultData = c.data;
                            var htmls = '<option value="">请选择</option>'; //全局变量
                            for (var i in resultData) {
                                htmls += '<option value = "' + resultData[i].id + '">' + resultData[i].title + '</option>'
                            }
                            $("#project").html(htmls); //通过select id进行赋值
                            layui.form.render('select', 'project');//需要渲染一下
                        }
                    }
                    if (c.code == 1002) {
                        alert('该项目下暂时无数据')
                    }
                }
            }
        }

        //获取模块
        function get_cat(project_id) {
            var xmlhttp;
            xmlhttp = new XMLHttpRequest();
            xmlhttp.open("POST", "get_interface_list", true);
            var params = 'type=cat&id=' + project_id;
            xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xmlhttp.send(params);
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var c = JSON.parse(xmlhttp.responseText)
                    console.log(c)
                    if (c.code == 1000) {
                        //给图标赋值
                        if (c.data == "") {
                            alert("暂无数据")
                            layui.form.render('select', 'cat');//需要渲染一下
                        } else {
                            resultData = c.data;
                            var htmls = '<option value="">请选择</option>'; //全局变量
                            for (var i in resultData) {
                                htmls += '<option value = "' + resultData[i].id + '">' + resultData[i].title + '</option>'
                            }
                            $("#cat").html(htmls); //通过select id进行赋值
                            layui.form.render('select', 'cat');//需要渲染一下
                        }
                    }
                    if (c.code == 1002) {
                        alert('该项模块暂时无数据')
                    }

                }
            }
        }

        //获取接口
        function get_interface(cat_id) {
            var xmlhttp;
            xmlhttp = new XMLHttpRequest();
            xmlhttp.open("POST", "get_interface_list", true);
            var params = 'type=interface&id=' + cat_id;
            xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xmlhttp.send(params);
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var c = JSON.parse(xmlhttp.responseText)
                    console.log(c)
                    if (c.code == 1000) {
                        //给图标赋值
                        if (c.data == "") {
                            alert("暂无数据")
                            var htmls = '<option value="">请选择</option>'; //全局变量
                            $("#interface").html(htmls); //通过select id进行赋值
                            layui.form.render('select', 'interface');//需要渲染一下
                        } else {
                            resultData = c.data;
                            var htmls = '<option value="">请选择</option>'; //全局变量
                            for (var i in resultData) {
                                htmls += '<option value = "' + resultData[i].id + '">' + resultData[i].title + '</option>'
                            }
                            $("#interface").html(htmls); //通过select id进行赋值
                            layui.form.render('select', 'interface');//需要渲染一下
                        }
                    }
                    if (c.code == 1002) {
                        alert('该项目下暂时无接口')
                    }

                }
            }
        }


        function get_apiname(pro_name) {
            if (pro_name == "") {
                alert("请选择项目")
            } else {
                var xmlhttp;
                xmlhttp = new XMLHttpRequest();
                xmlhttp.open("POST", "get_apiname", true);
                var data = '{ "pro_name" : "' + pro_name + '"}';
                xmlhttp.send(data);
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        var c = JSON.parse(xmlhttp.responseText)
                        if (c.code == 1000) {
                            //给图标赋值
                            if (c.api_name == "") {
                                alert("暂无数据")
                            } else {
                                resultData = c.api_name;
                                var htmls = '<option value="">请选择</option>'; //全局变量
                                for (var x in resultData) {
                                    htmls += '<option value = "' + resultData[x][0] + '">' + resultData[x][1] + '</option>'
                                }
                                $("#api_id").html(htmls); //通过select id进行赋值
                                layui.form.render('select', 'interface');//需要渲染一下
                            }
                        }
                        if (c.code == 1002) {
                            alert('该项目下暂时无接口')
                        }

                    }
                }
            }


        }

    </script>
{% endblock right %}
<!-- 此模板现有部分，除页面名称外，其他均不可编辑 -->

